<template>
    <div id="v_right">
        <div class="tabl-a">
            <a href="javascript:void(0)" @click="clickTab(Vtext)" :class="classname">tab1</a>
            <a href="javascript:void(0)" @click="clickTab(Vcolor)" :class="classname">tab2</a>
        </div>
        <div class="">
            <Vtext :is="contentTab"></Vtext>
        </div>
    </div>
</template>
<script>
import Vcolor from './color.vue'
import Vtext from './text.vue'
export default {
    name:'Vright',
     components:{
        Vcolor,
        Vtext
         
    },
    data(){
        return {
            contentTab:'Vtext',
            Vcolor:"Vcolor",
            Vtext:"Vtext",
            classname:""
        }
    },
    mounted(){
    },
    methods:{
        clickTab(thisTab){
            this.contentTab = thisTab;
            this.classname="in"
        }
    }
    
}
</script>
<style>
.tabl-a{text-align: left;}
.tabl-a a{text-decoration: none;color: #000;padding: 4px 20px; background: #ccc;font-size: 12px;}
</style>